<template>
  <div class="mian">
    <div class="ins">
      <div class="system" ref="system">
        <h2>迷你管理系统</h2>
        <el-input
          prefix-icon="el-icon-user-solid"
          placeholder="请输入内容"
          v-model="usr"
          clearable
          style="height: 38px; margin: 15px 0"
        ></el-input>
        <el-input
          prefix-icon="el-icon-lock"
          placeholder="请输入密码"
          v-model="psd"
          show-password
          style="height: 38px"
        ></el-input>
        <el-button
          type="primary"
          style="height: 40px; width: 100%; margin: 15px 0"
          @click="skip_btn"
          >登录</el-button
        >
        <el-alert
          v-show="show"
          title="您的账号或者密码不对"
          type="error"
          center
          show-icon
        >
        </el-alert>
        <slide-verify
          v-show="dsd"
          ref="slideblock"
          @success="onSuccess"
          slider-text="向右滑动"
        ></slide-verify>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "../apis/user";
export default {
  data() {
    return {
      dsd: false,
      show: false,
      usr: "",
      psd: "",
    };
  },
  methods: {
    // 滑动点击成功
    onSuccess() {
      this.dsd = false;
      let system = document.querySelector(".system");
      system.style.backgroundColor = "#455A64";
      this.$refs.slideblock.reset();
      console.log("验证通过");
      login({ account: this.usr, password: this.psd }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          localStorage.setItem("uses", JSON.stringify(res.data.id));
          localStorage.role = res.data.role;
          localStorage.token = res.data.token;

          this.$router.push("/index");
          this.$message({
            message: "小飞飞提示您，登录成功！",
            showClose: true,
            type: "success",
          });
        } else {
          setTimeout(() => {
            this.show = false;
          }, 1000);
          this.show = true;
        }
      });
      console.log(9999);
    },
    skip_btn() {
      this.dsd = true;
      let system = document.querySelector(".system");
      system.style.backgroundColor = "transparent";
    },
  },
};
</script>

<style lang="less" >
@import url("../assets/styles/zhut.less");
.slide-verify-slider {
  margin: 0 !important;
  background-color: #24455c !important;
  color: #fff !important;
}
#slideVerify {
  position: absolute;
  top: 60px;
  left: 5px;
}
.mian {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-image: url("../assets/imgs/lkj.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;

  .system {
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    background-color: @basecolor;
    width: 320px;
    height: 300px;
    border-radius: 3px;
    margin-right: 130px;

    h2 {
      text-align: center;
      color: @basecolor2;
      font-size: 22px;
    }
    .el-button {
      width: 100%;
    }
  }
  .ins {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url("../assets/imgs/wm.png");
    background-position: 30% 80%;
    background-size: 50%;
  }
}
</style>